<template>
  <div class="job-intention" v-if="modelData.show">
    <!-- 标题 -->
    <model-title
      :title="modelData.title"
      :model-style="modelStyle"
    ></model-title>
    <slot name="model-title"></slot>
    <!-- 求职意向 -->
    <ul>
      <!-- 求职类型 -->
      <li v-show="modelData.isShow.jobSearchType">
        <SvgIcon
          name="icon-jibenziliao"
          width="15px"
          hight="15px"
          class="icon"
        ></SvgIcon>

        {{ modelData.jobSearchType }}
      </li>
      <!-- 意向岗位 -->
      <li v-show="modelData.isShow.intendedPositions">
        <SvgIcon
          name="icon-yixianggangwei"
          width="15px"
          hight="15px"
          class="icon"
        ></SvgIcon>

        {{ modelData.intendedPositions }}
      </li>
      <!-- 意向城市 -->
      <li v-show="modelData.isShow.intendedCity">
        <SvgIcon
          name="connect"
          width="15px"
          hight="15px"
          class="icon"
        ></SvgIcon>
        {{ modelData.intendedCity }}
      </li>
      <!-- 期望薪资 -->
      <li v-show="modelData.isShow.expectSalary">
        <SvgIcon
          name="icon-xiangmu"
          width="15px"
          hight="15px"
          class="icon"
        ></SvgIcon>

        {{ modelData.expectSalary }}
      </li>
      <!-- 求职状态 -->
      <li v-show="modelData.isShow.jobStatus">
        <SvgIcon
          name="connect"
          width="15px"
          hight="15px"
          class="icon"
        ></SvgIcon>

        {{ modelData.jobStatus }}
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import ModelTitle from '@/material/ModelTitle/ModelTItle4/ModelTitle.vue'
import type { IJOBINTENTION } from '@/interface/model.ts'
import type { IMODELSTYLE } from '@/interface/modelStyle'
import useGetLineLeft from '@/hooks/material/useTemplate3LeftLine.ts'
import SvgIcon from '@/components/SvgIcon/index.vue'
const props = defineProps<{
  modelData: IJOBINTENTION
  modelStyle: IMODELSTYLE // 模块样式
}>()
const { left } = useGetLineLeft(props.modelStyle, -23)
console.log(11)
</script>
<style lang="scss" scoped>
.job-intention {
  padding-top: v-bind('modelStyle.pTop');
  padding-bottom: v-bind('modelStyle.pBottom');
  padding-left: v-bind('modelStyle.pLeftRight');
  padding-right: v-bind('modelStyle.pLeftRight');
  margin-top: v-bind('modelStyle.mTop');
  margin-bottom: v-bind('modelStyle.mBottom');
  box-sizing: border-box;

  /* 左侧竖线 */
  &::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: v-bind('modelStyle.themeColor');
    left: v-bind('left');
    top: 5px;
  }

  ul {
    display: flex;
    justify-content: space-between;
    padding: 30px 30px 10px 50px;

    li {
      list-style: none;
      font-size: v-bind('modelStyle.textFontSize');
      color: v-bind('modelStyle.textColor');
      font-weight: v-bind('modelStyle.textFontWeight');
      letter-spacing: 2px;
      display: flex;
      align-items: center;

      .icon {
        margin-right: 8px;
        font-size: 17px;
      }
    }
  }
}
</style>
